// src/Views/PublishedNews/index.vue
<template>
  <div>
    <div class="header">
      <span>已发布新闻</span>
    </div>
    <div class="container">
      <div class="containerheader ">
        <span class="ml-10 mt-5">共发布{{ total }}期</span>
        <div class="filter">
          <div class="datePicker">
            <DatePicker />
          </div>
          <div class="search">
            <el-input v-model="input" style="width: 240px;margin-top: 22px;margin-right: 30px"
              placeholder="请输入文章摘要或标题" />
          </div>
        </div>
      </div>
      <hr />
      <div v-if="!loading && publishedList.length === 0" class="no-data">暂无已发布新闻</div>
      <div class="news-list" v-if="!loading && publishedList.length > 0">
        <!-- 新闻列表内容 -->
        <div v-for="item in publishedList" :key="item.id" class="news-item">
          <!-- <h3>{{ item.title }}</h3> -->
          <img :src="item.coverImage" alt="" class="cover">
          <!-- <p>{{ item.description }}</p> -->
          <div class="news-meta">
            <span>新闻于{{ item.publishTime }}发布</span>
          </div>
          <img src="../../assets/eye.svg" alt="" class="eye">
        </div>
      <div class="page">
        <el-pagination v-if="total > 0" background layout="prev, pager, next" :total="total" :current-page="currentPage"
          :page-size="pageSize" @current-change="handlePageChange" />
      </div>
      </div>
    </div>
  </div>
</template>

<script>
import { issueList} from '@/Api/newsApi';
import { ref, onMounted } from 'vue';
import DatePicker from "../../Components/DatePicker.vue"

export default {
  components: {
    DatePicker
  },
  setup() {
    const publishedList = ref([]);
    const loading = ref(false);
    const currentPage = ref(1);
    const pageSize = ref(10);
    const total = ref(0);
    const input = ref('')

    // 获取已发布新闻列表
    // src/Views/PublishedNews/index.vue
    const fetchPublishedNews = async () => {
      try {
        loading.value = true; // 显示加载状态
        // 构造分页参数（与接口要求一致）
        const params = {
          current: currentPage.value, // 当前页码
          currentSize: pageSize.value // 每页条数
        };
        // 调用正确的接口：issueList
        const response = await issueList(params);

        if (response?.code === 200) {
          // 正确赋值给组件中声明的 publishedList
          publishedList.value = response.data?.records || [];
          total.value = response.data?.total || 0; // 同步总条数（用于分页）
          console.log('已发布新闻列表:', publishedList.value);
        } else {
          console.error('获取失败:', response?.message || '接口返回异常');
          publishedList.value = [];
          total.value = 0;
        }
      } catch (error) {
        console.error('请求出错:', error);
        publishedList.value = [];
        total.value = 0;
      } finally {
        loading.value = false; // 关闭加载状态
      }
    };


    // 分页变化处理
    const handlePageChange = (page) => {
      currentPage.value = page;
      fetchPublishedNews();
    };

    onMounted(() => {
      fetchPublishedNews();
    });

    return {
      publishedList,
      loading,
      currentPage,
      pageSize,
      total,
      handlePageChange,
       input
    };
  }
};
</script>

<style scoped>
/* 补充样式 */
.loading,
.no-data {
  text-align: center;
  padding: 20px;
  color: #666;
}

.container {
  width: 94%;
  margin: 20px auto;
}


.containerheader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  margin-bottom: 20px;
}

.containerheader span {
  font-size: 24px;
  font-weight: bold;

}

.filter {
  display: flex;
  align-items: center;
  /* 垂直居中对齐 */
  justify-content: space-around;
  /* 左对齐 */
  gap: 20px;
  /* 元素之间的间距 */
  padding: 10px 0;
  /* 上下内边距，可选 */
}

.news-list {
  padding: 20px;
  margin: 0 auto;
  width: 65%;
}

.news-item {
  padding: 15px;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
  /* 垂直方向居中对齐 */
  gap: 20px;
  /* 图片和时间之间的间距 */
  min-height: 120px;
  /* 确保行高一致，避免内容过短时不居中 */
}

.eye {
  width: 20px;
  height: 20px;
  margin-right: 5px;
  margin-left: auto;
}

.news-item h3 {
  margin: 0 0 10px 0;
  font-size: 18px;
}

.cover {
  width: 200px;
  height: 100px;
  margin-right: 10px;
}

.news-item p {
  margin: 0 0 10px 0;
  color: #666;
}

.news-meta {
  color: #999;
  font-size: 14px;
}
.page {
  display: flex;
  justify-content: end;
  align-items: center;
}
</style>